<template>
  <div>
    <div class="body">
      <div class="header">

        <div class="">{{sy_data[0].name}}</div>
        <router-link :to="{name:'use_rules'}" style="color:#fff;" class="use-gz">
          {{sy_data[0].guize}}
        </router-link>
        <div class="amount">{{userBalance |amountMin100(2)}}</div>
        <div class="mx" v-if="shouyi_data.length>0">
          {{sy_data[0].mingxi}}
        </div>
        <div class="mx" v-else>
          {{sy_data[0].zanwu}}
        </div>
      </div>
      <div class="main_new" v-if="shouyi_data.length>0">
        <ul class="list">
          <li v-for="(item,ind) in shouyi_data" :key="ind">
            <div class="list_left" v-if="item.orderType==-1||item.orderType==31" @click="href_mx(item.orderId,item.rstatus)">
              <h1>{{Jsonway[item.orderType]}}</h1>
              <h1>余额:<span class="min_new">{{item.companyBalance | amountMin100(2)}}</span></h1>
            </div>
            <div class="list_left" v-else>
              <h1>{{Jsonway[item.orderType]}}</h1>
              <h1>余额:<span class="min_new">{{item.companyBalance | amountMin100(2)}}</span></h1>
            </div>
            <div class="list_right">
              <h1><span v-if="item.orderType==-1">-</span><span v-else>+</span>{{item.companyProfit |amountMin100(2)}}</h1>
              <h1>{{item.ctime |formatDateTIME()}}</h1>
            </div>
          </li>
          <li class="lhd" @click="herf">
            {{sy_data[0].gengduo}}
          </li>
        </ul>

      </div>
      <div class="main_new">
        <div v-if="userBalance>0" class="btn" @click="cashcardHref">
          {{sy_data[0].tixian}}
        </div>
        <div v-else>

        </div>
      </div>
    </div>
    <PhoneVerification ref="PhoneVerification" @getMessage="getVal"></PhoneVerification>
    <business_footer :pageName="'busiMine'"></business_footer>
  </div>
</template>
<script scoped>
  import business_footer from "@/components/business_footer"
  import PhoneVerification from '@/components/PhoneVerification'
  export default {
    data() {
      return {
        pageName: "personalmine",
        sy_data: [
          { name: '收益余额(元)', mingxi: '收益明细', gengduo: '查看更多', tixian: '立即提现', guize: '使用规则', zanwu: '暂无明细' }
        ],
        shouyi_data: {},
        banlanceType: 1,
        userBalance: 0,
        comID: this.$route.query.id,
        Jsonway: { "16": '即时红包', "17": '霸屏红包', "18": '打赏红包', "1": '商家收款', "-1": "提现", "31": '失败返款' },
        CashList: ''
      }
    },
    mounted() {
      this.list();
      this.cashList();
    },
    methods: {
      cashcardHref: function () {
        this.$refs.PhoneVerification.childMethod();
        console.log(this.PhoneVerificationStyle + "1112222333")
        if ("成功" == this.PhoneVerificationStyle) {
          this.$router.push({ name: 'cashcard', query: { banlancetype: this.banlanceType } })
        }
      },
      getVal(msg) {//msg就是传过来的数据了  这只是个形参  名字可以随意
        this.PhoneVerificationStyle = msg;//然后将数据赋值给
      },
      herf: function () {
        this.$router.push({ name: 'cash_earnings_more', query: { balancetype: 1 } })
      },
      href_mx: function (orderId, rstatus) {//点提现明细
        this.$router.push({ name: 'withdrawalstate', query: { rewardId: orderId } });
      },
      list() {
        this.comID = this.$route.query.id
        this.$http.get(this.APIURL_PREFIX + "/api/wap/company/profit", { params: { page: 1, rows: 4, companyId: this.comID } }).then((response) => {
          this.shouyi_data = response.data.data
          this.wallet();
        }).catch(function (err) {
          console.log(err)
        });
      },
      wallet() {
        this.$http.get(this.APIURL_PREFIX + "/api/wap/company/wallet?page=1&rows=1").then((response) => {
          this.userBalance = response.data.data[0].companyBalance
          console.log(this.userBalance)
        }).catch(function (err) {
          console.log(err)
        });
      },
      cashList() {//卡包
        this.$http.get(this.APIURL_PREFIX + "/api/wap/bankCardBag").then((response) => {
          this.CashList = response.data.data
        }).catch(function (err) {
          console.log(err)
        });
      },

    },
    components: {
      business_footer,
      PhoneVerification
    },
  }
</script>


<style scoped>
  /* @import "../../../assets/personal/css/cash_earnings.css"; */
  .cilx {
    clear: both;
  }

  .body {
    width: 100%;
    height: 100%;
    font-size: 16px;
  }

  .header {
    position: relative;
    height: 8rem;
    background: #ff0808;
    color: #ffffff;
    text-align: left;
    padding: 20px 5%;
  }

  .amount {
    line-height: 54px;
    font-size: 36px;
  }

  .use-gz {
    position: absolute;
    top: 20px;
    right: 5%;
  }

  .mx {
    left: 5%;
    right: 5%;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    background-color: #ffffff;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ff0808;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  @media screen and (max-width: 320px) {
    .mx {
      height: 36px;
      line-height: 36px;
    }
  }

  .main_new {
    width: 90%;
    margin: 0 auto;
  }

  .list li {
    height: 65px;
    border-bottom: 0.5px solid #e5e5e5;
    background: #ffffff;
    padding: 5px;
  }

  .list_left, .list_right {
    width: 45%;
  }

  .list_left {
    float: left;
  }

    .list_left h1, .list_right h1 {
      font-size: 15px;
      text-align: left;
      padding: 8px;
    }

  .list_right {
    float: right;
  }

    .list_right h1:nth-of-type(2) {
      font-size: 12px;
      text-align: right;
    }

    .list_right h1:nth-of-type(1) {
      text-align: right;
    }

  .lhd {
    height: 40px !important;
    line-height: 25px;
  }

  .btn {
    width: 100%;
    height: 50px;
    background: #ff0808;
    display: block;
    margin-top: 15px;
    border-radius: 8px;
    line-height: 50px;
    color: #ffffff
  }

  .min_new {
    font-size: 14px;
  }
</style>
